<template>
    <div class="login-container"
        :style="{ backgroundImage: `url(https://gd-hbimg.huaban.com/d6d45420a5ec7ddd340125915c3cbe688c7ac3ef45faf8-gkTYsT_fw658)` }">
        <div class="login-content">
            <el-card shadow="never" class="login-card">
                <h2 style="padding: 0 0 30px 0;">欢迎注册</h2>
                <el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" @submit.prevent="onSubmit"
                    label-width="80px">
                    <el-form-item label="用户名" class="login-form-item">
                        <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid"
                            placeholder="请输入用户名"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" class="login-form-item">
                        <el-input type="password" v-model="registerForm.password" prefix-icon="el-icon-lock"
                            placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item label="头像" class="login-form-item">
                        <el-upload class="avatar-uploader" name="image" action="/api/document/uploadImage"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="registerForm.avatar" :src="registerForm.avatar" class="avatar" alt="头像" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="个性签名" class="login-form-item">
                        <el-input type="textarea" autosize v-model="registerForm.signature"
                            placeholder="请输入个性签名"></el-input>
                    </el-form-item>

                    <el-form-item class="login-btn-container">
                        <el-button type="primary" native-type="submit">登录</el-button>
                        <el-link type="primary">注册</el-link>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage, type UploadProps } from 'element-plus';
import { ref } from 'vue';
const registerForm = ref({
    username: '',
    password: '',
    avatar: '',
    signature: ''
});

const registerFormRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    avatar: [{ required: true, message: '请上传图片', trigger: 'blur' }],
    signature: [{ required: true, message: '请输入个人签名', trigger: 'blur' }],
};

// 头像上传前处理函数，这里假设接受image/jpeg和image/png格式，大小小于2M
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 20) {
        ElMessage.error('Avatar picture size can not exceed 20MB!')
        return false
    }
    return true
};

// 头像上传成功后的回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(response);

    registerForm.value.avatar = response.data.url;
    console.log(registerForm.value.avatar);
    
}

// 这里假设 headers 包含你的上传所需 token 等信息
const headers = { 'Authorization': 'Bearer your_token_here' };

// 表单提交方法
const onSubmit = () => {
    // console.log('注册表单数据：', form.value);
    // 这里应调用后端接口进行注册操作
};

</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: background 0.5s ease-in-out;
}

.login-content {
    width: 400px;
}

.login-card {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
}

.login-form-item {
    margin-bottom: 20px;
}

.login-btn-container {
    margin-top: 20px;
}

::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-between;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    background-color: #fff;
}
</style>